<template>
<!-- 首页的笔记页面 -->
    <div class="note">
        <Loading v-if="!lists"/>
        <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
            <!-- 下拉提示 -->
            <template #pulling>
            <img class="pull" src="../assets/images/pullFresh.png" />
            </template>
            <!-- 释放提示 -->
            <template #loosing>
            <img class="pull" src="../assets/images/pullFresh.png" />
            </template>

            <!-- 加载提示 -->
            <template #loading>
            <img class="pull" src="../assets/images/loading.gif" />
            </template>

            
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <template #loading>
                    <img class="pull" src="../assets/images/loading.gif" />
                </template>
                <div class="tips">
                    <ul v-for="(tipsRow,index) in topics" :key="index" class="tipsRow">
                        <li v-for="tip in tipsRow" :key="tip.id" class="tip"># {{tip.name}}</li>
                    </ul>
                </div>
               <WaterFull :lists="lists"/> 
                
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { getNoteList } from "@/apis/index";
import Loading from  "@/components/Loading.vue"
import WaterFull from  "@/components/WaterFull.vue"

export default {
    components:{
        Loading,
        WaterFull
    },
    data: function(){
        return{
            lists: null,
            topics: null,
            loading: false,
            finished: false,
            refreshing: false,
            i: 0,
        }
    },
    //   banner轮播图和推荐列表数据获取
  created: async function () {
    this.lists = (await getNoteList(0)).data.result.list;
    this.topics = (await getNoteList(0)).data.result.topics;
    
  },
    methods: {
//下拉加载数据
        onLoad: function(){
        // 异步更新数据
            if (this.refreshing) {
                    this.lists = [];
                    this.refreshing = false;
                    this.i = this.i+1;
                }
                this.i ++;
                getNoteList(this.i).then( res => {
                    this.lists = [...this.lists, ...res.data.result.list];
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    if (this.i == 10) {
                        this.finished = true;
                    }
                })
        },
        onRefresh() {
        // 清空列表数据
        this.finished = false;
        // this.lists = null;
        // this.i = 1;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        setTimeout(() => {
            this.onLoad();
        },1000);
    },
  },
}
</script>

<style lang="less" >
.pull{
  margin: 0 auto;
  width: 100px;
}

    .note{
        .tips{
            overflow-x: auto;
            .tipsRow{
                display: flex;
                &:nth-child(2){
                    margin-top: 10px;
                }
                .tip{
                    font-size: 13px;
                    margin: 0 10px;
                    border-radius: 25px;
                    padding: 10px;
                    // height: 30px;
                    background-color: #f3f9fa;
                    color: #50969f;
                    white-space: nowrap;
                }
            }
        }
        
    }
</style>